<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title>瀑布流demo</title>
	<style>
	* {
		padding: 0;
		margin: 0;
	}
	#wrap {
		position: relative;
		zoom: 1;
		margin: 0px auto;
	}
	#wrap li{
		width: 250px;
		float: left;
		list-style: none;
	}
	.boxCont {
		position: relative;
		margin: 15px 15px 0 15px;
		padding: 15px;
		border: 1px solid #ccc;
		background: #FAFAFA;
		/*border-radius: 5px;*/
	}
	a img {
		display: block;
		background-color: white;
		border: 0;
	}
	p.description {
		margin: 10px 0 5px;
		font-size: 12px;
		line-height: 1.35em;
		color: #444;
		display: block;
	}
	</style>
	<script type="text/javascript" src="jquery-1.7.2.js"></script> 
	<script type="text/javascript" src="jquery.lazyload.js"></script> 

</head>
<body>
	<ul id="wrap"></ul>
</body>

<script type="text/javascript">

var imgData = [
	{url: "imgs/0.jpg", onlineUrl:"http://img.hb.aicdn.com/cc1487d34d9f121ece0cf2320a849ec16134a72e583fe-5kRwyV_fw192", width: "500", height: "482", desc:"好朋友就像是星星。你不一定总是能见到他们，但你知道，他们会一直在那里。"},
	{url: "imgs/1.jpg", onlineUrl:"http://img.hb.aicdn.com/901e7075ae1d947e5e6faec4701671b53e272a0867fb2-TU5V0w_fw192", width: "192", height: "269", desc:"羚羊峡谷（Antelope Canyon)是世界上著名的狭缝型峡谷之一，位于美国亚利桑纳州北方。据说那是摄影人一生不可不去的景点之一，充斥着色彩与形状，无论是地质还是色彩都不可思议的，鬼斧神工"},
	{url: "imgs/2.png", onlineUrl:"http://img.hb.aicdn.com/0260b79af7bac6601c016c30f7c76dde348199a717689a-1oCc13_fw192", width: "192", height: "758", desc:"我们为色彩爱好者收集了花瓣站内优质的色彩资源，帮助其发现色彩基因，并用色彩来创造美。点击图片进入花瓣专题【你好，色彩！】"},
	{url: "imgs/3.gif", onlineUrl:"http://img.hb.aicdn.com/4649d6b7dbbbef63e0b4cec5bde639b07960212d5aaf-HZblBt_fw192", width: "192", height: "168", desc:"Character City print"},
	{url: "imgs/3.jpg", onlineUrl:"http://img.hb.aicdn.com/41c7a2f3b4be46fe53a7fd720dda9aa07bb59eda48fb4-RU0jvc_fw192", width: "192", height: "134", desc:"lalala"},
	{url: "imgs/4.jpg", onlineUrl:"http://img.hb.aicdn.com/b8ca799593334b4a12c93a2f32791a3462f1da2d4f1cb-I6nQ6e_fw192", width: "192", height: "744", desc:"【懒人必学自制锅贴】材料：速冻水饺（口味自选）、油少许、饮用水。做法：1、平底锅到入适量的油，只要保证锅底均匀有一层油即可。2、将饺子排列放入锅内，一定要保证每个饺子底都能沾到油，3.开大火，待锅有热度后倒入一碗水（水与饺子比例是刚好能盖过饺子肚）4、盖上锅盖，大火直至水完全收干即可！是不是很简单！"},
	{url: "imgs/5.jpg", onlineUrl:"http://img.hb.aicdn.com/174d61a4dcd1d29a3e475ddc3cdf883b30ead34730dc-t3jLUF_fw192", width: "192", height: "145", desc:"不必为了讨好这个世界而扭曲了自己_一句话心语"},
	{url: "imgs/6.jpg", onlineUrl:"http://img.hb.aicdn.com/0c744672a74d5f76673297a54e3b40df6c2b454d602b-Oz0ZWu_fw192", width: "192", height: "128", desc:"原来生命里，岁月才是最大的神偷。它把我们最心爱的，最重视的，不知道不明白的，我们的爱情、宝贵的时光、心爱的和心痛的回忆都给偷走了。——《岁月神偷》"},
	{url: "imgs/7.jpg", onlineUrl:"http://img.hb.aicdn.com/7e2e4a04f98a68c4c298b98dfa58e4869293e640508d0-lMkJbT_fw192", width: "192", height: "922", desc:"羚羊峡谷（Antelope Canyon)是世界上著名的狭缝型峡谷之一，位于美国亚利桑纳州北方。据说那是摄影人一生不可不去的景点之一，充斥着色彩与形状，无论是地质还是色彩都不可思议的，鬼斧神工"},
	{url: "imgs/8.jpg", onlineUrl:"http://img.hb.aicdn.com/0260b79af7bac6601c016c30f7c76dde348199a717689a-1oCc13_fw192", width: "192", height: "288", desc:"2012.10.16更新"},
	{url: "imgs/9.jpg", onlineUrl:"http://img.hb.aicdn.com/2f9383cb9c621b5a4c575e3f47ba15a7d6cdd0d526959-AJ4mKU_fw192", width: "192", height: "289", desc:"这边请——畅游CarolinWanitzek的奇异梦幻"},
	{url: "imgs/10.jpg", onlineUrl:"http://img.hb.aicdn.com/436b61aa50de5154886c8ff8959bc4eb4a6ab2e47e71-ZTnNW4_fw192", width: "192", height: "127", desc:"敏捷Saietta |电动摩托车在伦敦"},
	{url: "imgs/11.jpg", onlineUrl:"http://img.hb.aicdn.com/39e8525b74c2c719c9cda2a1717ef71846823ec1147a-raXeYJ_fw192", width: "192", height: "127", desc:"「我没事 我很好」这是全世界说的最多最脱口而出的谎言 真正在乎你的人听完会立马看破你的伪装 会陪着你 安慰你 让你脆弱的那一面显现出来 又保护着 而假装在意你的人 就是等着你说这句话 然后听完赶紧走人"},
	{url: "imgs/1.gif", onlineUrl:"http://img.hb.aicdn.com/750d964e5659a969932ccfad2ae09c7c4c8dbfd66a103-Fji5N2_fw192", width: "192", height: "136", desc:"star boy, ether girl"},
	{url: "imgs/12.jpg", onlineUrl:"http://img.hb.aicdn.com/f66e7c20169c36056b0c53389fbae06dd5a2ec43556f7-RC53gU_fw192", width: "192", height: "185", desc:"新买的两尾金鱼，喜欢面向窗外，吐着气泡游来游去。 都说鱼的记忆只有短短数秒，鱼没有眼泪，即使有，也会 被短暂的记忆遗忘在水里，至于它们透过鱼缸和窗户 见到的云朵，想必结局都是一样吧。"},
	{url: "imgs/13.jpg", onlineUrl:"http://img.hb.aicdn.com/50c36d73d1614c67cc83b304ca3a26e1ab54cbefe5e9-uhd439_fw192", width: "192", height: "256", desc:"【利西翠妲里】的遗忘之塔"},
	{url: "imgs/14.jpg", onlineUrl:"http://img.hb.aicdn.com/c6089f78163bbc8543c18446e181eef377d2e84166d4-QUo0yF_fw192", width: "192", height: "220", desc:"隐形表"},
	{url: "imgs/15.jpg", onlineUrl:"http://img.hb.aicdn.com/5b527b71141d6f2cf4eb8321212325a6d5d7ebac4d0fb-CTehEO_fw192", width: "192", height: "154", desc:"qweqwe"},
	{url: "imgs/16.jpg", onlineUrl:"http://img.hb.aicdn.com/116be1bc671d11b9f48daf9b31e99fcbc49ec9c2964d-qwhS2b_fw192", width: "192", height: "128", desc:"If the love the doping and it stand aloof from the entire point, it is not love. -------爱情里要是掺杂了和它本身无关的算计，那就不是真的爱情。"},
	{url: "imgs/17.jpg", onlineUrl:"http://img.hb.aicdn.com/318bf3d3e1ea8518136e890f2cb39e106bf915e9d4e1-dDKEaO_fw192", width: "192", height: "288", desc:"乌镇"},
	{url: "imgs/18.jpg", onlineUrl:"http://img.hb.aicdn.com/c69f36d514c885440e836ae75ec91fc5890c778d1db54-RdzJMM_fw192", width: "192", height: "288", desc:"qweqwe"}
];

var Waterfall = function(id) {
	this.elm = document.getElementById(id);
	this.currentNum = 0;	//当前water总数
	this.minHeight = 0;	//最低列高度
	this.loading = false;
	this.init();
};

//函数节流
function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
    	method.call(context);
    }, 100);
}

Waterfall.prototype = {
	init: function() {
		this.loadWater();
		var _this = this;

		window.onresize = function() {			
			//函数节流
			throttle(_this.sort, _this);
		};
		//滚动加载
		window.onscroll = function() {
		 	var scrollHeight = (document.documentElement.clientHeight || document.body.clientHeight)
		 					+ (document.documentElement.scrollTop || document.body.scrollTop);
		 	if (_this.minHeight <= scrollHeight && !_this.loading) {
		 		_this.loading = true;
				//模拟数据请求，延迟500ms加载
		 		setTimeout(
		 			function() { 
						_this.loadWater();	//请求的数据可从此处传参
						_this.sort();
						_this.loading = false;
					}, 
					500
				);
			}
		};
	},
	loadWater: function() {
		var water = '';		
		var rand;
		for(var i = 0; i < imgData.length; i++) {
			rand = i;// % imgData.length;
			water += '<li><div class="boxCont">'
					+ '<a href="###"><img id="water' + this.currentNum + '" src="grey.gif" data-original="' + imgData[rand].onlineUrl +  '" width="190px" height="' + (imgData[rand].height / imgData[rand].width * 190 | 0) +'px" alt="picture" data-show="false"/></a>'
					+ '<p class="description">' + imgData[rand].desc + '</p>'
					+ '</div></li>';
			this.currentNum++;
		}
		this.elm.innerHTML += water;
		this.sort();

		//lazyload
		$("img[data-show='false']").lazyload({
			effect : "fadeIn",
			load : function(elements_left, settings) {
                $(this).attr("data-show", true);                           
            }
		});
		$("img[data-show='true']").fadeTo("slow", 1);

	},
	sort: function() {
		var listH = [];	//各列当前高度
		var box = this.elm.getElementsByTagName("li");
		var minH = box[0].offsetHeight,
			boxW = box[0].offsetWidth,
			boxH,
			n = document.documentElement.offsetWidth / boxW | 0;  //多少条瀑布。与0操作相当于parseInt()。
		this.elm.style.width = n * boxW + "px";

		//获取某值v在数组s中的index
		function getarraykey(s, v) {
			for(k in s) {
				if(s[k] == v) {
					return k;
				}
			}
		}

		for(var i = 0; i < box.length; i++) {
			boxH = box[i].offsetHeight; //获取每个water的高度
			if(i < n) { //第一行的water以浮动排列，不需绝对定位
				listH[i] = boxH;
				box[i].style.position = '';
			} 
			else {
				minH = Math.min.apply({}, listH); //获取各列高度最低的一列高度
				minKey = getarraykey(listH, minH);	//获取最低列
				listH[minKey] += boxH ; //加上新高度后更新高度值				
				box[i].style.top = minH + 'px';
				box[i].style.left = (minKey * boxW) + 'px';
				box[i].style.position = 'absolute';
			}
		}
		this.minHeight = minH;
	}
};

var waterfallDemo = new Waterfall("wrap");
</script>

</html>
